<template>
	<el-container class="home-container" direction="vertical">
		<layout-header></layout-header>
		<el-container>
			<el-aside width="200px">
				<el-scrollbar>
					<nav-tree></nav-tree>
				</el-scrollbar>
			</el-aside>
			<el-main>
				<el-tabs type="border-card" v-model="$store.state.activeTab">
					<el-tab-pane label="对象" name="obj">
						<table-struct></table-struct>
					</el-tab-pane>
					<el-tab-pane label="SQL" name="sql">
						<sql-panel></sql-panel>
					</el-tab-pane>
				</el-tabs>
				<router-view></router-view>
			</el-main>
		</el-container>

	</el-container>
</template>

<script>
import LayoutHeader from "./Header"
import NavTree from "./NavTree";
import TableStruct from "./TableStruct";
import SqlPanel from "./SQLPanel";
export default {
	components: {
		LayoutHeader,
		NavTree,
		TableStruct,
		SqlPanel
	}
}
</script>

<style lang="less" scoped>
.home-container{
	height: 100%;
	.el-aside{
		background-color: #333744;
		height:  calc(100vh - 60px);
	}
	.el-main{
		background-color: #EAEDF1;
		padding: 0;
		height:  calc(100vh - 60px);
		.el-tabs{
			margin: 0;
		}
	}
}
</style>
